{{- $scratch := .Page.Scratch.Get "scratch" -}}
<!-- require APlayer -->
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<style type="text/css">
    [data-scheme="dark"] {
        .aplayer {
            background: #212121
        }

        .aplayer.aplayer-withlist .aplayer-info {
            border-bottom-color: #5c5c5c
        }

        .aplayer.aplayer-fixed .aplayer-list {
            border-color: #5c5c5c
        }

        .aplayer .aplayer-body {
            background-color: #212121
        }

        .aplayer .aplayer-info {
            border-top-color: #212121
        }

        .aplayer .aplayer-info .aplayer-music .aplayer-title {
            color: #fff
        }

        .aplayer .aplayer-info .aplayer-music .aplayer-author {
            color: #fff
        }

        .aplayer .aplayer-info .aplayer-controller .aplayer-time {
            color: #eee
        }

        .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {
            fill: #eee
        }

        .aplayer .aplayer-list {
            background-color: #212121
        }

        .aplayer .aplayer-list::-webkit-scrollbar-thumb {
            background-color: #999
        }

        .aplayer .aplayer-list::-webkit-scrollbar-thumb:hover {
            background-color: #bbb
        }

        .aplayer .aplayer-list li {
            color: #fff;
            border-top-color: #666
        }

        .aplayer .aplayer-list li:hover {
            background: #4e4e4e
        }

        .aplayer .aplayer-list li.aplayer-list-light {
            background: #6c6c6c
        }

        .aplayer .aplayer-list li .aplayer-list-index {
            color: #ddd
        }

        .aplayer .aplayer-list li .aplayer-list-author {
            color: #ddd
        }

        .aplayer .aplayer-lrc {
            text-shadow: -1px -1px 0 #666
        }

        .aplayer .aplayer-lrc:before {
            background: -moz-linear-gradient(top, #212121 0%, rgba(33, 33, 33, 0) 100%);
            background: -webkit-linear-gradient(top, #212121 0%, rgba(33, 33, 33, 0) 100%);
            background: linear-gradient(to bottom, #212121 0%, rgba(33, 33, 33, 0) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#212121', endColorstr='#00212121', GradientType=0)
        }

        .aplayer .aplayer-lrc:after {
            background: -moz-linear-gradient(top, rgba(33, 33, 33, 0) 0%, rgba(33, 33, 33, 0.8) 100%);
            background: -webkit-linear-gradient(top, rgba(33, 33, 33, 0) 0%, rgba(33, 33, 33, 0.8) 100%);
            background: linear-gradient(to bottom, rgba(33, 33, 33, 0) 0%, rgba(33, 33, 33, 0.8) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00212121', endColorstr='#cc212121', GradientType=0)
        }

        .aplayer .aplayer-lrc p {
            color: #fff
        }

        .aplayer .aplayer-miniswitcher {
            background: #484848
        }

        .aplayer .aplayer-miniswitcher .aplayer-icon path {
            fill: #eee
        }
    }
</style>
<script src="https://fastly.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://fastly.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

{{- if .IsNamedParams -}}
{{- if .Get "url" -}}
<meting-js url="{{ .Get `url` }}" name="{{ .Get `name` }}" artist="{{ .Get `artist` }}" cover="{{ .Get `cover` }}"
    theme="{{ .Get `theme` | default `#2980b9` }}" {{- with .Get "fixed" }} fixed="{{ . }}" {{ end -}} {{- with
    .Get "mini" }} mini="{{ . }}" {{ end -}} {{- with .Get "autoplay" }} autoplay="{{ . }}" {{ end -}} {{- with
    .Get "volume" }} volume="{{ . }}" {{ end -}} {{- with .Get "mutex" }} mutex="{{ . }}" {{ end -}}></meting-js>
{{- else if .Get "auto" -}}
<meting-js auto="{{ .Get `auto` }}" theme="{{ .Get `theme` | default `#2980b9` }}" {{- with .Get "fixed" }}
    fixed="{{ . }}" {{ end -}} {{- with .Get "mini" }} mini="{{ . }}" {{ end -}} {{- with .Get "autoplay" }}
    autoplay="{{ . }}" {{ end -}} {{- with .Get "loop" }} loop="{{ . }}" {{ end -}} {{- with .Get "order" }}
    order="{{ . }}" {{ end -}} {{- with .Get "volume" }} volume="{{ . }}" {{ end -}} {{- with .Get "mutex" }}
    mutex="{{ . }}" {{ end -}} {{- with .Get "list-folded" }} list-folded="{{ . }}" {{ end -}} {{- with
    .Get "list-max-height" }} list-max-height="{{ . }}" {{ end -}}></meting-js>
{{- else -}}
<meting-js server="{{ .Get `server` }}" type="{{ .Get `type` }}" id="{{ .Get `id` }}"
    theme="{{ .Get `theme` | default `#2980b9` }}" {{- with .Get "fixed" }} fixed="{{ . }}" {{ end -}} {{- with
    .Get "mini" }} mini="{{ . }}" {{ end -}} {{- with .Get "autoplay" }} autoplay="{{ . }}" {{ end -}} {{- with
    .Get "loop" }} loop="{{ . }}" {{ end -}} {{- with .Get "order" }} order="{{ . }}" {{ end -}} {{- with .Get "volume"
    }} volume="{{ . }}" {{ end -}} {{- with .Get "mutex" }} mutex="{{ . }}" {{ end -}} {{- with .Get "list-folded" }}
    list-folded="{{ . }}" {{ end -}} {{- with .Get "list-max-height" }} list-max-height="{{ . }}" {{ end
    -}}></meting-js>
{{- end -}}
{{- else if strings.HasSuffix (.Get 0) "http" -}}
<meting-js auto="{{ .Get 0 }}" theme="#2980b9"></meting-js>
{{- else -}}
<meting-js server="{{ .Get 0 }}" type="{{ .Get 1 }}" id="{{ .Get 2 }}" theme="#2980b9"></meting-js>
{{- end -}}
{{- $scratch.Set "music" true -}}